<template>
  <div class="index">
    <el-container>
      <!--头部-->
      <el-header>
        <div style="text-align:center">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item style="background-color: transparent;font-weight:bold;" index="0">
              <img style="width: 90px" src="http://qsrr7y19m.hn-bkt.clouddn.com/05.png">
            </el-menu-item>
            <el-menu-item style="background-color: transparent;font-weight:bold;" index="1" @click="shouye">首页</el-menu-item>
            <el-menu-item style="background-color: transparent;font-weight:bold;" index="2" @click="plate">板块</el-menu-item>
           <!-- <el-menu-item v-if="loginuser==true" style="background-color: transparent;font-weight:bold;" index="3" @click="oneselfmsg" >消息中心</el-menu-item>-->
            <el-menu-item v-if="loginuser==false"  style="background-color: transparent;font-weight:bold;display:none;" index="3" @click="oneselfmsg">消息中心</el-menu-item>

            <el-menu-item style="background-color: transparent;font-weight:bold;" >
              <el-form style="margin-top: 7px;" :inline="true"  class="demo-form-inline">
                <el-form-item >
                  <el-input  style="background-color:transparent;border:5px;" v-model="likename"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent;  color: black"  @click="onSubmit">
                    搜索</el-button>
                </el-form-item>
              </el-form>
            </el-menu-item>
            <div v-if="loginuser==true">
              <el-menu-item index="6" style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;color: red" @click="tuichu">退出</el-button>
              </el-menu-item>
              <el-menu-item class="user-name"  style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold; color:black;background-color: Transparent; border-style :none;" type="text" @click="oneself">
                  欢迎登陆:{{this.user.username}}
                  <img :src="this.user.imgurl" style="width: 40px; height:40px; border-radius: 50%;">
                </el-button>
              </el-menu-item>
            </div>
            <div v-if="loginuser==false">
              <el-menu-item index="6" style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;" @click="index_to_login">登录</el-button>
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;" @click="index_to_regist">注册</el-button>
              </el-menu-item>
            </div>
            <div v-if="admin_user==true">
              <el-menu-item index="6" style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;" @click="index_to_admin">
                  论坛管理
                </el-button>
              </el-menu-item>
            </div>
          </el-menu>

        </div>
      </el-header>

      <!--中间模块-->

      <el-main class="index1">
        <router-view></router-view>
      </el-main>


      <!--底部-->
      <div class="tableTitle">
        <span class="midText">版本说明</span>
        <div class="foot" >
         <!-- <P>
            <a href="http://help.tianya.cn/about/about.html" rel="nofollow" target=_blank>关于学牛</a> |
            <a href="http://help.tianya.cn/about/service.html" rel="nofollow" target=_blank>广告服务</a> |
            <a href="http://service.tianya.cn/" rel="nofollow" target=_blank>学牛客服</a> |
            <a href="http://help.tianya.cn/about/ystl.html" rel="nofollow" target=_blank>隐私和版权</a> |
            <a href="http://help.tianya.cn/about/contact.html" rel="nofollow" target=_blank>联系我们</a> |
            <a href="http://join.tianya.cn" rel="nofollow" target=_blank>加入学牛</a> |
            <a href="http://service.tianya.cn/jbts.html" rel="nofollow" target=_blank>侵权投诉</a>
          </P>-->
          <P class="copyright">&copy; 学牛社区</P>
        </div>
      </div>
      <!--<el-footer style="background-color: #ffffff">

      </el-footer>-->
    </el-container>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        activeIndex: '1',
        loginuser:false,
        user:[],
        count: 10,
        loading: false,
        admin_user: false,
        likename:'',
      }
    },
    computed: {
      noMore () {
        return this.count >= 20
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    created() {
      this.user = JSON.parse(localStorage.getItem("user"));
      if(this.user != null){
        this.loginuser = true;
        if(this.user.status >= 3){
          this.admin_user = true ;
        }
      }
    },
    methods:{
      shouye(){
        this.$router.push("/")
        this.$router.go(0);
      },
      /*消息页面跳转*/
      oneselfmsg(){
        // alert("消息页面跳转方法");
        this.$router.push('/msgindex');
      },
      /*板块跳转方法*/
      plate(){
        // alert("板块页面跳转") ;
        this.$router.push("/plate");
      },

      /*论坛管理按钮*/
      index_to_admin(){
       if(this.user.status==3 || this.user.status==4){
            this.admin_user = true ;
         this.$router.push("/adminindex");
       }
      },

      load () {
        this.loading = true
        setTimeout(() => {
          this.count += 2
          this.loading = false
        }, 2000)
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      /*登录*/
      index_to_login(){
        this.$router.push("/login");
      },
      /*注册*/
      index_to_regist(){
        this.$router.push("/regist");
      },
      /*退出*/
      tuichu(){
        localStorage.removeItem('user');
          this.loginuser = false ;
          this.admin_user = false ;
          this.$router.push('/')
        this.$router.go(0);
      },
      /*个人信息页面跳转*/
      oneself(){
        // alert("跳转到用户个人信息页面");
        this.$router.push('/userself')
      },
      /*搜索方法*/
      onSubmit() {
        alert("搜素功能"+this.likename);

        if(localStorage.getItem('likename') != null){
          localStorage.removeItem("likename");
          localStorage.setItem("likename" ,this.likename);
          this.$router.push("/findliketheme");
        }else if (localStorage.getItem("likename") == null){
          localStorage.setItem("likename" ,this.likename);
          this.$router.push("/findliketheme");
        }
      }
    }
  }
</script>
<style>
  .foot{
    padding-top: 5px;
  }
  .foot a{
    color: #fff;
    text-decoration:none;
    /*color:#333;*/
  }
  .tableTitle {
    position: relative;
    margin: 10px auto;
    width: 600px;
    height: 2px;
    background-color: #d4d4d4;
    text-align: center;
    font-size: 16px;
    /*color: rgba(101, 101, 101, 1)*/

  }
  .midText {
    position: absolute;
    left: 50%;
    background-color: #ffffff;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
    background-color: transparent;font-weight:bold;
  }
  .user-name{
    top: 50%;
  }
  .el-header, .el-footer {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    text-align: center;
    line-height: 10px;
  }
  .el-main {
   /* background-color: #eee;*/

  }
/*  .index{
    background-image: url("http://qphgnjayp.hn-bkt.clouddn.com/tu2.jfif");
    !*background-repeat: no-repeat;*!
    !*background-position: center center;*!
    background-size: cover;
  }*/
  .el-menu-demo{
    background-color: transparent;
    font-weight:bold
  }
  #username {
    float: right;
  }

</style>
